<template>
	<view id="children">
		
		<view class="padding-tb-lg">
			<!-- 列表 -->
			<view class="cu-list menu sm-border">
				<navigator class="cu-item arrow" v-for="item in studentsList" :key="item.id" :url="'../editChild/editChild?id='+item.id">
					<view class="content flex justify-around text-black">
						<text>{{item.student_name}}</text>
						<text>{{item.age}}岁</text>
						<text>{{item.gender}}</text>
						<text>{{item.guardian_phone}}</text>
					</view>
				</navigator>
			</view>
		</view>
		
		<view class="padding flex flex-direction my-btn">
			<button class="cu-btn bg-black margin-tb-sm lg" @click="add">立即添加</button>
		</view>
	</view>
</template> 

<script>
	import {mapState} from 'vuex'
	 
	export default {
		data() {
			return {
				 
			}
		},
		onLoad() {
			uni.showNavigationBarLoading()
			
			// 我的学生列表
			this.getStudents()
		},
		methods: {
			// 我的学生列表
			async getStudents(){
				let res = await this.$api.students()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('我的学生列表', res.data.data)
					
					this.$store.dispatch('sendStudents', res.data.data)
				}
			},
			// 立即添加
			add(){
				uni.navigateTo({
					url: '/pages/addChild/addChild'
				})
			}
		},
		computed: {
			...mapState(['studentsList'])
		}
	}
</script>

<style lang="scss">
	#children{
		.my-btn{
			position: fixed;
			width: 100%;
			bottom: 10upx;
		}
	}
</style>
